<template>
    <div class="table-page">
        <div class="table-operation-box">
            <el-button
                type="primary"
                plain
                style="margin-bottom: 2em"
                :disabled="ids.length === 0"
                @click="
                    tableDelete(
                        '/exam/paper/questionList/delete-list',
                        {
                            ids: ids
                        },
                        true
                    )
                "
                >批量删除
            </el-button>
            <el-button
                type="primary"
                plain
                style="margin-bottom: 2em"
                @click="showQuestionTable"
                >添加试题
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                border
                :data="tableData"
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" min-width="55">
                </el-table-column>
                <el-table-column prop="remark" label="试题内容">
                    <template slot-scope="scope">
                        <p>{{ status[scope.row.firstType] }}</p>
                        <p v-html="scope.row.stem[0].vl">
                            {{ scope.row.stem[0].vl }}
                        </p>
                        <ul
                            v-if="
                                status[scope.row.firstType] === '单选题' ||
                                    status[scope.row.firstType] === '多选题'
                            "
                        >
                            <li
                                v-for="(item, index) in scope.row.answer"
                                :key="index"
                            >
                                <span>{{ item.option }}</span
                                >.<span v-html="item.content[0].vl"></span>
                            </li>
                        </ul>
                        <p v-if="status[scope.row.firstType] === '单选题'">
                            正确答案：{{ scope.row.rightAnswer }}
                        </p>
                        <p v-if="status[scope.row.firstType] === '多选题'">
                            正确答案：<span
                                v-for="(item, index) in scope.row.rightAnswer"
                                :key="index"
                                >{{ item }}</span
                            >
                        </p>
                        <p v-if="status[scope.row.firstType] === '判断题'">
                            正确答案：<span
                                v-for="(item, index) in scope.row.rightAnswer"
                                :key="index"
                            >
                                <span v-if="item === 1">对</span>
                                <span v-else>错</span>
                            </span>
                        </p>
                        <p v-if="status[scope.row.firstType] === '填空题'">
                            正确答案：<span
                                v-for="(item, index) in scope.row.rightAnswer"
                                :key="index"
                                v-html="item.vl"
                            ></span>
                        </p>
                        <p v-if="status[scope.row.firstType] === '简答题'">
                            正确答案：<span
                                v-for="(item, index) in scope.row.rightAnswer"
                                :key="index"
                                v-html="item.vl"
                            ></span>
                        </p>
                        <p>
                            <span>试题解析：</span
                            ><span>{{ scope.row.answerDesc[0].vl }}</span>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            type="warning"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/paper/questionList/delete',
                                    {
                                        id: scope.row.questionListReId
                                    },
                                    true
                                )
                            "
                            >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            v-loading="questiontableLoading"
            title="选择试题"
            :visible.sync="dialogTableVisible"
            width="80%"
        >
            <paper-question-select-component
                :query-data="selectQuestionparams"
                :is-show="isShow"
                @questionSelectEvent="getQuestionIds"
            ></paper-question-select-component>
        </el-dialog>
    </div>
</template>

<script>
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { fetchQuestionType, addExamQuestionReBatch } from "@/api/exam";
import { get } from "@/api/request";
import paperQuestionSelectComponent from "@/views/models/exam/component/paperQuestionSelectComponent";

export default {
    name: "ExamPracticeQuestion",
    components: {
        paperQuestionSelectComponent
    },
    mixins: [TablePage],
    data() {
        return {
            isShow: true,
            selectQuestionparams: {
                isHide: false,
                queryType: 1
            },
            secondTypeIdOptions: [],
            selectQuestion: false,
            questionIds: [],
            ids: [],
            dialogTableVisible: false,
            questiontableLoading: false,
            questionSubmitFlag: false
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.questionFirstType
        })
    },
    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {},
    methods: {
        getQuestionIds(data) {
            this.questionIds = data;
            this.dialogTableVisible = false;
            this.addQuestion();
        },
        search(queryData) {
            if (this.$route.params) {
                sessionStorage.setItem(
                    "exam_practice_param",
                    JSON.stringify(this.$route.params)
                );
            }
            let item = JSON.parse(
                sessionStorage.getItem("exam_practice_param")
            );
            this.queryData.paperType = item.paperType;
            this.queryData.id = item.id;
            this.selectQuestionparams.classificationId = item.classificationId;
            this.loadTable("/exam/chapters/questionList", queryData);
        },

        handleSelectionChange(val) {
            this.ids = [];
            const length = val.length;
            for (let n = 0; n < length; n++) {
                this.ids.push(val[n].questionListReId);
            }
        },
        showQuestionTable() {
            this.dialogTableVisible = true;
            this.selectQuestion = true;
        },
        addQuestion() {
            const length = this.questionIds.length;
            if (length === 0) {
                return;
            }
            let params = [];
            for (let n = 0; n < length; n++) {
                let param = {
                    resourceId: this.queryData.id,
                    questionId: this.questionIds[n],
                    paperType: this.queryData.paperType
                };
                params.push(param);
            }
            addExamQuestionReBatch(params, "关联试题异常").then(() => {
                this.search(this.queryData);
            });
        },
        loadQuestionTable(
            url,
            queryData,
            setResult = true,
            map,
            errorMessage = {
                message: "数据加载失败"
            }
        ) {
            if (this.questiontableLoading) {
                return Promise.resolve();
            }
            this.questiontableLoading = true;
            return get(
                url,
                {
                    current: this.pageData.currentPage,
                    size: this.pageData.pageSize,
                    pageSize: this.pageData.pageSize,
                    pageCurrent: this.pageData.currentPage,
                    ...this.questionQueryData,
                    ...(queryData || {})
                },
                errorMessage
            )
                .then(res => {
                    let list = res.records || res.result || res || [];
                    list = list.map(da => {
                        da = map ? map(da) : da;
                        return {
                            ...da,
                            opLoading: false,
                            edit: false
                        };
                    });
                    if (setResult) {
                        this.questionTableData = list;
                    }
                    this.pageData.total = res.total || 0;
                    this.pageData.currentPage =
                        res.current || res.currentPage || 1;
                    this.pageData.pageSize = res.size || res.pageSize || 10;
                    return res;
                })
                .finally(() => {
                    this.questiontableLoading = false;
                });
        }
    }
};
</script>

<style lang="scss" scoped></style>
